<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="时间范围" prop="searchDateRange">
        <el-date-picker clearable size="small"
                        @change="drawMixingWaterVolumeChart"
                        v-model="queryParams.searchDateRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="drawMixingWaterVolumeChart">搜索</el-button>
      </el-form-item>
    </el-form>
    <table>
    <tr><td style="width: 200px" >料层厚度1：{{decimal(lchd1,1)}}</td><td style="width: 200px" >料层厚度2：{{decimal(lchd2,1)}}</td><td style="width: 200px" >料层厚度3：{{decimal(lchd3,1)}}</td><td style="width: 200px" >料层厚度4：{{decimal(lchd4,1)}}</td><td style="width: 200px" >料层厚度5：{{decimal(lchd5,1)}}</td><td style="width: 200px" >料层厚度6：{{decimal(lchd6,1)}}</td></tr>
    <tr><td style="width: 200px" >炉膛压力：{{decimal(dhlw1,1)}}</td><td style="width: 200px" >点火炉炉膛温度1：{{decimal(dhlw2,1)}}</td><td style="width: 200px" >点火炉炉膛温度2：{{decimal(dhlwbw,1)}}</td><td style="width: 200px" >点火炉炉膛温度3：{{decimal(ltyl,1)}}</td></tr>
    <tr><td style="width: 250px" >圆辊给料机频率：{{decimal(sjjplfk,1)}}</td><td style="width: 250px" >多辊布料器频率：{{decimal(rfplfk,1)}}</td><td style="width: 250px" >烧结机频率：{{decimal(bsplfk,1)}}</td><td style="width: 250px" >环冷机频率：{{decimal(kfplfk,1)}}</td><td style="width: 250px" >板式给矿机频率：{{decimal(jzplfk,1)}}</td></tr>
    </table>
    <el-row :gutter="10" class="mb8" style="width: 100%;margin: 0 auto;margin-top: 20px">
      <el-col :span="12">  <dv-border-box-7><div ref="mixingWaterOChart" style="width: 100%;height: 300px"></div> </dv-border-box-7>  </el-col>
      <el-col :span="12">  <dv-border-box-7><div ref="mixingWaterWChart" style="width: 100%;height: 300px"></div> </dv-border-box-7>  </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8" style="width: 100%;margin: 0 auto;margin-top: 20px">
      <el-col :span="12">  <dv-border-box-7><div ref="mixingWaterTChart" style="width: 100%;height: 300px"></div> </dv-border-box-7>  </el-col>
      <el-col :span="12">  <dv-border-box-7><div ref="mixingWaterFChart" style="width: 100%;height: 300px"></div> </dv-border-box-7>  </el-col>
    </el-row>
  </div>
</template>
<script>
  import {getHisChart,getRealDataByTags, getSurveyDataNow} from '@/api/app/plc/cache'
  import * as echarts from 'echarts'
  export default {
    props:{
      mixingWaterVolume: String,
    },
    data() {
      return {
        timer: null,
        selectDate: '',
        lchd1: null,
        lchd2: null,
        lchd3: null,
        lchd4: null,
        lchd5: null,
        lchd6: null,
        lchd7: null,
        lchd8: null,
        dhlw1: null,
        dhlw2: null,
        dhlwbw: null,
        ltyl: null,
        sjjplfk: null,
        rfplfk: null,
        bsplfk: null,
        kfplfk: null,
        jzplfk: null,
        jzfplfk: null,

        mixingWaterVolumeList: [],
        queryParams: {
          searchDateRange: [this.moment().subtract('hours', 2).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        },
      }
    },
    created() {
      this.drawMixingWaterVolumeChart();
      this.timer = setInterval(() => {
        this.getSurveyDataNow()
      }, 1000)
    },
    beforeDestroy() {
      this.timer && clearInterval(this.timer)
      this.timer=null;
    },
    methods: {
      getSurveyDataNow() {
        getSurveyDataNow().then(res => {
          this.lchd1 = res.data.lchd1
          this.lchd2 = res.data.lchd2
          this.lchd3 = res.data.lchd3
          this.lchd4 = res.data.lchd4
          this.lchd5 = res.data.lchd5
          this.lchd6 = res.data.lchd6
          this.lchd7 = res.data.lchd7
          this.lchd8 = res.data.lchd8

          this.dhlw1 = res.data.dhlw1
          this.dhlw2 = res.data.dhlw2
          this.dhlwbw = res.data.dhlwbw
          this.ltyl = res.data.ltyl

          this.sjjplfk = res.data.sjjplfk
          this.rfplfk = res.data.rfplfk
          this.bsplfk = res.data.bsplfk
          this.kfplfk = res.data.kfplfk
          this.jzplfk = res.data.jzplfk
          this.jzfplfk = res.data.jzfplfk
        })
      },
      drawMixingWaterVolumeChart() {
        let data = {};
        if (this.queryParams.searchDateRange) {
          data = {
            startDt: this.queryParams.searchDateRange[0],
            endDt: this.queryParams.searchDateRange[1]
          }
          data.codes = "st3_sjlc1_lh"+ ","+"st3_sjlc2_lh"+ ","+"st3_sjlc3_lh"+ ","+"st3_sjlc4_lh"+ ","+"st3_sjlc5_lh"+ ","+"st3_sjlc6_lh"+ ","+
          "st3_lt_p"+ ","+"st3_c_sl_ti0567"+ ","+"st3_c_sl_ti0568"+ ","+
          "st3_c_sl_ti0569"+ ","+
            "st3_c_sl_yg_sp"+ ","+"st3_c_sl_dg_sp"+ ","+"st3_c_sl_sjj_sp"+ ","+"st3_c_sl_hlj_sp"+ ","+"st3_c_sl_gk_sp"
          // , '#9A60B4', '#B94F51', '#FC8251'
          let colorList = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#AA069F', '#FD0100', '#FC7D02', '#93CE07', '#E76264', '#B473D2', '#724488']
          getHisChart(data).then(response => {
            this.$nextTick(() => {
              let eList = response.data
              let series1 = [],series2=[],series3=[],series4=[]
              let list1 = [], list2 = [], list3 = [], list4 = [], list5 = [], list6 = [], list7 = [], list8 = [],
                list9 = [], list10 = [], list11 = [], list12 = [], list13 = [], list14 = [], list15 = []
              let nameList = [], xdata = []
              //第一条数据
              nameList.push(eList[0].name)
              nameList.push(eList[1].name)
              nameList.push(eList[2].name)
              nameList.push(eList[3].name)
              nameList.push(eList[4].name)
              nameList.push(eList[5].name)
              nameList.push(eList[6].name)
              nameList.push(eList[7].name)
              nameList.push(eList[8].name)
              nameList.push(eList[9].name)
              nameList.push(eList[10].name)
              nameList.push(eList[11].name)
              nameList.push(eList[12].name)
              nameList.push(eList[13].name)
              nameList.push(eList[14].name)
              for (let a = 0; a < eList[0].list.length; a++) {
                xdata.push(eList[0].list[a].dt)
                list1.push(eList[0].list[a].value)
                list2.push(eList[1].list[a].value)
                list3.push(eList[2].list[a].value)
                list4.push(eList[3].list[a].value)
                list5.push(eList[4].list[a].value)
                list6.push(eList[5].list[a].value)
                list7.push(eList[6].list[a].value)
                list8.push(eList[7].list[a].value)
                list9.push(eList[8].list[a].value)
                list10.push(eList[9].list[a].value)
                list11.push(eList[10].list[a].value)
                list12.push(eList[11].list[a].value)
                list13.push(eList[12].list[a].value)
                list14.push(eList[13].list[a].value)
                list15.push(eList[14].list[a].value)
              }

              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[0],
                data: list1,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[0]}
              })
              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[1],
                data: list2,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[1]}
              })
              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[2],
                data: list3,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[2]}
              })
              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[3],
                data: list4,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[3]}
              })
              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[4],
                data: list5,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[4]}
              })
              series1.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[5],
                data: list6,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[5]}
              })

              series2.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[8],
                data: list9,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[6]}
              })
              series2.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[9],
                data: list10,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[7]}
              })


              series2.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[10],
                data: list11,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[1]}
              })

              series3.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[7],
                data: list8,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[2]}
              })
              series4.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[10],
                data: list11,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[3]}
              })

              series4.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[11],
                data: list12,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[1]}
              })

              series4.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[12],
                data: list13,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[1]}
              })
              series4.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[13],
                data: list14,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[2]}
              })
              series4.push({
                showSymbol: false,
                yAxisIndex: 0,
                name: nameList[14],
                data: list15,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[3]}
              })
              // series4.push({
              //   showSymbol: false,
              //   yAxisIndex: 0,
              //   name: nameList[15],
              //   data: list16,
              //   type: 'line',
              //   smooth: true,
              //   itemStyle: {color: colorList[4]}
              // })
              // series4.push({
              //   showSymbol: false,
              //   yAxisIndex: 0,
              //   name: nameList[16],
              //   data: list17,
              //   type: 'line',
              //   smooth: true,
              //   itemStyle: {color: colorList[5]}
              // })
              // series4.push({
              //   showSymbol: false,
              //   yAxisIndex: 0,
              //   name: nameList[17],
              //   data: list18,
              //   type: 'line',
              //   smooth: true,
              //   itemStyle: {color: colorList[6]}
              // })

              let chart1 = echarts.init(this.$refs.mixingWaterOChart, 'light')
              let option1 = {
                backgroundColor: 'transparent',
                /** 保存echart图片 **/
                grid: {
                  left: 30,
                  right: 40,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                  name: '料层厚度',
                  nameTextStyle: {
                    fontWeight: "bold",
                    fontSize: "14",
                    align: "left",
                    color: "#000",
                  },
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                      type: 'dotted',
                      //color: ['#aaa', '#ddd']
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#000'
                    },
                  },
                  min: function (val) {
                    return parseInt(val.min - 20)
                  },
                  max: function (val) {
                    return parseInt(val.max + 20)
                  },
                },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#4c0fed', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#505760', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series1
              }
              chart1.setOption(option1, true)

              let chart2 = echarts.init(this.$refs.mixingWaterWChart, 'light')
              let option2 = {
                backgroundColor: 'transparent',
                /** 保存echart图片 **/
                grid: {
                  left: 30,
                  right: 40,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                    name: '炉温',
                    nameTextStyle: {
                      fontWeight: "bold",
                      fontSize: "14",
                      align: "left",
                      color: "#000",
                    },
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    min: function (val) {
                      return parseInt(val.min - 20)
                    },
                    max: function (val) {
                      return parseInt(val.max + 20)
                    },
                  },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series2
              }
              chart2.setOption(option2, true)

              let chart3 = echarts.init(this.$refs.mixingWaterTChart, 'light')
              let option3 = {
                backgroundColor: 'transparent',

                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                    name: '炉膛压力',
                    nameTextStyle: {
                      fontWeight: "bold",
                      fontSize: "14",
                      align: "left",
                      color: "#000",
                    },
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    min: function (val) {
                      return parseInt(val.min - 20)
                    },
                    max: function (val) {
                      return parseInt(val.max + 20)
                    },
                  },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series3
              }
              chart3.setOption(option3, true)

              let chart4 = echarts.init(this.$refs.mixingWaterFChart, 'light')
              let option4 = {
                backgroundColor: 'transparent',

                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                    name: '运行频率',
                    nameTextStyle: {
                      fontWeight: "bold",
                      fontSize: "14",
                      align: "left",
                      color: "#000",
                    },
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    min: function (val) {
                      return parseInt(val.min - 5)
                    },
                    max: function (val) {
                      return parseInt(val.max + 5)
                    },
                  },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series4
              }
              chart4.setOption(option4, true)
            })
          })
        }
      },
    }
  }
</script>
